<template>
	<view class="home-component">
		<view class="top">
			<Share />
		</view>
		<view class="video-link-text">
			<!-- <view class="title">请输入视频链接</view> -->
			<textarea  row="6"  placeholder="请输入要下载视频的链接,支持各大视频平台" placeholder-style="color:#98989F;" class="link-input" v-model="link"/>
			<view class="btn" @click="onAnalysisLink">视频链接分析</view>
		</view>
		
		<view class="video-content" v-if="videoShow">
			<video controls class="video" src="https://v26-web-prime.douyinvod.com/video/tos/cn/tos-cn-ve-15/oERqU99EOY9viI8QwBFnAxSDgANJ4AfCfVVAar/?a=6383&br=1134&bt=1134&btag=c0000e00038000&cd=0%7C0%7C0%7C3&ch=5&cquery=101s_100B_100H_100K_100o&cr=3&cs=0&cv=1&dr=0&ds=3&dy_q=1733736948&expire=1733748413&feature_id=2e1813f3872a2105acee44623dff2864&ft=6ZayzQD1ppftDNLBCs~.C_fauVq0InifDFdc6BICPRnhOQdHDDf_hRAOMWWTousZ.&is_ssr=1&l=2024120917354644FC4A574673360370AB&lr=all&mime_type=video_mp4&ply_type=4&policy=4&qs=0&rc=NDs3M2Q1aTs5ODQ6M2U2NUBpMzt4ZW85cm9vdzMzNGkzM0AxYjUtMi82NWAxYTBjXzReYSNkbi9zMmQ0cl5gLS1kLWFzcw%3D%3D&signature=a8b281d38a8366564aacfc01a8ce28b8&temp=1&tk=webid&webid=26198ff38959f773c63a6fc9b3542e2fdcfd2f10d2782124ed1adc24709862df2c739c4d9d816cdfc2a7b3e3c2ecca9675304def4912ce11c42a71e2e1709e34c39e460805dd8fe30c04b447f774a9ae1c067c23aff29269a43ccf436c3d3fcbd3dbea5ad806f1f4d4f0192c83e19c91-3a7f2a425c3b9875c1bf8dea2af05f83"></video>
			<view class="btn">保存视频到手机相册</view>
			<view class="des">请确保所下载视频符合平台规定和版权要求，下载的视频仅供个人使用，不得用于商业用途</view>
		</view>
	
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import  Share  from "@/components/share/index.vue"
	const link = ref<null | string>(null);
	const videoShow = ref(false);
	const onAnalysisLink = async () => {
		try{
			videoShow.value = false;
			uni.showLoading({
				title:"视频分析中....",
				mask:true
			})
			setTimeout(() => {
				videoShow.value = true;
				uni.hideLoading()
			}, 3000)
		}catch(e){
			console.log('e', e)
			//TODO handle the exception
		}
	}
	
	
</script>

<style scoped lang="scss">
	.home-component{
		min-height: 100vh;
		padding: 0 20upx;
		background-color: $themeColor;
		.top{
			display: flex;
			justify-content: flex-end;
			display: none;
		}
		
		.video-link-text{
			// margin-top: 40upx;
			padding-top: 100upx;
			.title{
				color: #fff;
				font-size: 32upx;
				margin-bottom: 20upx;
			}
			.link-input{
				width: calc(100% - 40upx);
				height: 300upx;
				border: none;
				background-color: #2e2e38;
				border-radius: 30upx;
				margin-bottom: 30upx;
				color: #fff;
				font-size: 32upx;
				line-height: 50upx;
				// text-indent: 2em;
				padding: 20upx;
			}
			.btn{
				width: 100%;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50upx;
				color: #fff;
				background: linear-gradient(to right, #2e2e38, #141426);
			}
		}
	
	
		.video-content{
			.video{
				width: 100%;
				margin: 100upx 0 20upx 0;
				border-radius: 20upx;
			}
			.btn{
				width: 100%;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50upx;
				color: #fff;
				background: linear-gradient(to right, #6E9BFF, #1E5CE4);
				margin-bottom: 50upx;
			}
			.des{
				display: none;
				width: 80%;
				margin: 40upx auto 0 auto;
				padding-bottom: 100upx;
				font-size: 24upx;
				color: #2e2e38;
			}
		}
	}
</style>